<template>
    <div class="home-grid">
        <van-grid :column-num="5">
          <van-grid-item 
          v-for="item in gridList" 
          :key="item.id" 
          :icon="item.icon_url" 
          :text="item.name" 
          @click='$router.push(`/categroy?id=${item.id}`)'/>
        </van-grid>
    </div>
</template>

<script setup name="HomeGrid">
// 发送请求，拿到分类列表数据渲染页面
import { getHomeList } from '../../../model/goods';
import { onMounted, ref } from 'vue'


// 准备一个变量，保存分类列表
const gridList = ref([])

// 挂载页面完毕，发送请求，请求分类列表
onMounted(async () => {
    const res = await getHomeList()
    if (res.status !== 200) return
    gridList .value = res.data.data.channel
    // console.log(res)
    // console.log(res.data.data.channel)
})
</script>

<style scoped>
</style>